<template>
    <div class="container yuan-container">

        <a-card title="人员审核">
            <div class="filter-panel">
                <div class="filter-list">
                    <span>用户名称/手机号：</span>
                    <a-input-search allowClear v-model="pageParams.name" placeholder="请输入用户名称/手机号" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>角色权限：</span>
                    <a-select v-model="pageParams.roleName" @change="resetList" allowClear placeholder="请选择角色权限">
                        <a-select-option value="需求方">需求方</a-select-option>
                        <a-select-option value="成果方">成果方</a-select-option>
                        <a-select-option value="中介方">中介方</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>角色类型：</span>
                    <a-select v-model="pageParams.userType" @change="resetList" allowClear placeholder="请选择角色类型">
                        <a-select-option  value="个人">个人</a-select-option>
                        <a-select-option  value="企业/单位">企业/单位</a-select-option>
                        <a-select-option  value="专家">专家</a-select-option>
                        <a-select-option  value="专家团队">专家团队</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>是否为技术经纪人：</span>
                    <a-select v-model="pageParams.hasTechnicalRepresentative" @change="resetList" allowClear placeholder="请选择是否为技术经纪人">
                        <a-select-option  :value="1">是</a-select-option>
                        <a-select-option  :value="0">否</a-select-option>
                    </a-select>
                </div>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="primary" @click="clickShow(record)" v-if="$utilCheckPermission(['personnelAuditDetail'])">查看</a-button>
                            <a-button style="margin-left:10px" type="warning" @click="clickAuth(record,false)"
                                v-if="record.state===0 && $utilCheckPermission(['personnelAuditAudit'])">审核</a-button>
                            <a-button style="margin-left:10px" type="warning" @click="clickAuth(record,true)"
                                v-if="record.auditTechnicalState===0  && record.state===1 && $utilCheckPermission(['personnelAuditAudit'])">技术经纪人审核</a-button>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <AuthVue :visible="detailVisible" @closeModal="() => detailVisible = false" @resetList="resetList" :isShow="isShow"
            :detailInfo="detailInfo" :isTechnical="isTechnical" />
        <ShowVue :visible="showVisible" @closeModal="() => showVisible = false" @resetList="resetList" :isShow="isShow"
            :detailInfo="detailInfo" :isTechnical="isTechnical" />
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import AuthVue from "./auth.vue";
import ShowVue from "./show.vue";
@Component({
    name: "tpl",
    components: { AuthVue,ShowVue },
})
export default class extends Vue {
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams={}
    columns: any[] = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "用户姓名",
        },
        {
            align: "center",
            dataIndex: "roleName",
            key: "roleName",
            title: "角色权限",
        },
        {
            align: "center",
            dataIndex: "userType",
            key: "userType",
            title: "角色类型",
        },
        {
            align: "center",
            dataIndex: "createTime",
            key: "createTime",
            title: "注册时间",
            width: 110,
        },
        {
            align: "center",
            dataIndex: "phone",
            key: "phone",
            title: "手机号",
        },
        {
            align: "center",
            dataIndex: "state",
            key: "state",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "待审核", class: "status-words c-primary" },
                    1: { title: "已通过", class: "status-words c-success" },
                    2: { title: "已驳回", class: "status-words c-danger" },
                };
                const dataOne = data[record.state] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },
        {
            align: "center",
            dataIndex: "hasTechnicalRepresentative",
            key: "hasTechnicalRepresentative",
            title: "是否技术经纪人",
            customRender: (text: string, record: any, index: number) => (record.hasTechnicalRepresentative === 1 ? "是" : "否"),
        },
        {
            align: "center",
            dataIndex: "auditTechnicalState",
            key: "auditTechnicalState",
            title: "技术经纪人状态",
            customRender: (text: string, record: any, index: number) => {
                const data = {
                    0: { title: "待审核", class: "status-words c-primary" },
                    1: { title: "已通过", class: "status-words c-success" },
                    2: { title: "已驳回", class: "status-words c-danger" },
                };
                const dataOne = data[record.auditTechnicalState] || {};
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 340,
            scopedSlots: { customRender: "action" },
        },
    ];

    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getUserAuthList({
                pageNum: this.pagination.current,
                pageSize: this.pagination.pageSize,
                ...this.pageParams
            });

            this.pageList = res.data?.rows ||[];
            this.pagination.total = res.data?.total ||0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }

    detailVisible = false;
    isShow = false;
    isTechnical = false;
    detailInfo = "";
    clickAuth(item, isTechnical) {
        this.detailInfo = item;
        this.isShow = false;
        this.isTechnical = isTechnical;
        this.detailVisible = true;
    }
    showVisible=false
    clickShow(item) {
        this.detailInfo = item;
        this.isShow = true;
        this.showVisible = true;
    }
}
</script>
<style scoped lang="scss">
.container {
}
</style>
